import React from 'react';
import Banner from '../widget/banner/banner.jsx';
import Optimization from '../widget/optimization/optimization.jsx';
import Card from '../widget/card/card.jsx';
import LazyLoad from 'react-lazyload';
import Footer from '../widget/footer/footer.jsx';
import { message } from 'antd';
import axios from 'axios'
import { getHomePageBanners, getPreferredShops, getHomeHotSellGoods } from 'api/home.js';
import { getUserInfo, logOut } from 'api/user.js';
import {
  Link,
  NavLink
} from 'react-router-dom';
import './index.scss';
class Home extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			venue_id: 0,
      bannerList: [],
      preList: [],
      hotList: [],
      img1:'',
      username:''
		}
	}
  _logOut () {
    logOut({}).then(res => {
      if (res.code === 1) {
        message.success('退出成功！', 3, this.props.history.push('/login'))
      }
    })
  }
  _getUserInfo () {
    getUserInfo({}).then(res => {
      if (res.code === 1) {
        this.setState({
          img1:res.data.user_info.userInfo.user_avatar,
          username:res.data.user_info.userInfo.user_name
        })
      }
    })
  }
  componentWillUnmount () {

  }
	componentDidMount () {
    getPreferredShops().then(res => {
      if (res.code === 1) {
        this.setState({
          preList: res.data
        })
      } else {
        message.error(res.message, 3)
      }
    })
    getHomePageBanners().then(res => {
      if (res.code === 1) {
        this.setState({
          bannerList: res.data
        })
      } else {
        message.error(res.message, 3)
      }
    })
    getHomeHotSellGoods().then(res => {
      if (res.code === 1) {
        this.setState({
          hotList: res.data
        })
      }
    })
    this._getUserInfo();
		window.onload=function(){
			var obtn=document.getElementById('to_top');
			var timer=null;
			obtn.onclick=function(){
				timer=setInterval(function(){
					var topH=document.documentElement.scrollTop||document.body.scrollTop;
					var stepLength=Math.ceil(topH/5);
					document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
					if(topH==0){clearInterval(timer);}
				},30);
			}
		}
	}
	render() {
		return(
			<div className='main-index'>
				<div id="header">
					<div><img src="static/images/sy/LOGO .png"/></div>
					<NavLink to='/search'><div className="sy_sousuo"><span className="glyphicon glyphicon-search"></span>请输入关键词搜索</div></NavLink>
					<div>{/*<Link to="/user/message">*/}<img src="static/images/sy/xiaoxi.png"/>{/*</Link>*/}</div>
				</div>
        <Banner bannerList={this.state.bannerList}/>
        <div className="list list2">
          <div><NavLink to="/classify"><img src="static/images/sy/shangpinfenlei_icon.png"/><span>商品分类</span></NavLink></div>
          <div><NavLink to="/news"><img src="static/images/sy/zixun_icon.png"/><span>资讯</span></NavLink></div>
          <div><NavLink to="/Cart"><img src="static/images/sy/jinhuodan_icon.png"/><span>进货单</span></NavLink></div>
          <div><NavLink to="/user"><img src="static/images/sy/wode.png"/><span>我的</span></NavLink></div>
        </div>
        <div id="box">
					<div>
						<p className="title">行业市场</p>
						<div className="list1 list">
							<Link to={
								{
									pathname: '/trade',
                  state:{
                    venue_id:'1',
                    json1:this.state.json1
                  }
                }
              }>
                <div className="sy_one">
                  <span>生活用品</span>
                  <img src="static/images/home/venues/logo/sy-gongye.png"/>
                </div>
              </Link>
              <Link to={
                  {
                    pathname: '/trade',
                    state:{venue_id:'2'}
                  }
                }>
                <div className="sy_two">
                  <span>皮革制品</span>
                  <img src="static/images/home/venues/logo/sy-pige.png"/>
                </div>
              </Link>
              <Link to={
                  {
                    pathname: '/trade',
                    state:{venue_id:'3'}
                  }
                }>
							  <div className="sy_three">
                  <span>生活小家电</span>
                  <img src="static/images/home/venues/logo/sy-jiadian.png"/>
                </div>
              </Link>
						</div>
						<div className="list1 list">
              <Link to={
                  {
                    pathname: '/trade',
                    state:{venue_id:'4'}
                  }
                }>
							  <div  className="sy_four">
                  <span>客房清洁</span>
                  <img src="static/images/home/venues/logo/sy-kefang.png"/>
                </div>
              </Link>
              <Link to={
                  {
                    pathname: '/trade',
                    state:{venue_id:'5'}
                  }
                }>
							  <div className="sy_five">
                  <span>汽车工具</span>
                  <img src="static/images/home/venues/logo/sy-qiche.png"/>
                </div>
              </Link>
              <Link to={
                  {
                    pathname: '/trade',
                    state:{venue_id:'1'}
                  }
                }>
							  <div className="sy_last">
                  <span>更多市场<br/>>></span>
                </div>
              </Link>
						</div>
					</div>
					<div>
						<p className="title">优选商家</p>
						<Optimization preList={this.state.preList}/>
					</div>
					<div className="sy_card">
						<p className="title">热销推荐<span>热门精选爆款商品</span></p>
            {this.state.hotList.map((item, index) => {
              return (
                <LazyLoad offsetTop={200} key={index} height={0}>
                  <Card shopDetail={{...item, hide: false}}/>
                </LazyLoad>
              )
            })}
					</div>
          { this.state.img1 === '' ?
            <div className="denglu">
              <NavLink to="/login"><span>登录</span></NavLink>
              <NavLink to="/register"><span>注册</span></NavLink>
            </div>
            :
            <div className="denglu">
              <Link to="/user">
                {
                  this.state.img1 === null ?
                  <img src="static/images/default/logo.png"/>
                  : <img src={this.state.img1}/>
                }
              </Link>
              <Link to="/user"><span className="name">{this.state.username}</span></Link>
              <span className="sy_tc" onClick={this._logOut.bind(this)}>退出</span>
            </div>
          }
        </div>
        <Footer/>
        <div id="to_top"><img src="static/images/sy/fuceng.png"/></div>
			</div>
			)
	}
}
export default Home;
